<template>
  <div class="login_container">
    <!-- 3.14 点击按钮发送请求 -->
    <!-- <button @click="loginFn">登录</button> -->

    <!-- 7.7直接使用，会自动导入 -->
    <!-- <div>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div> -->


    <div class="login_in">
      <h1>叩丁狼商品管理系统</h1>
      <!-- 八、登录页面，在 element-plus 里面的 Form表单组件 -->
      <!-- 8.1代码修改 -->
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" type="text" placeholder="请输入账号">
            <template #prefix>
              <el-icon class="el-input__icon" :size="20" color="#444545">
                <UserFilled />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码">
            <!-- 8.7插入icon -->
            <template #prefix>
              <!-- 8.8修改 el-icon 的样式 -->
              <el-icon class="el-input__icon" :size="20" color="#444545">
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<!-- 四、ts环境，因为我们需要写 ts ，所以我们要在每个 script 里面加上 lang='ts' -->
<script lang='ts' setup>
// 3.12导入接口
import { ApiLogin } from '@/http/api'

// 3.13发送请求
// const loginFn = () => {
//   ApiLogin({})
// }
// const loginFn = () => {
//   ApiLogin({
//     // 5.3加上需要携带的参数，然后回去 Types 文件夹里面的 api.d.ts
//     username: 'admin',
//     password: '123456'
//   })
// }

// 8.2将方法引入
import { reactive, ref } from 'vue'
//@ts-ignore //告诉ts不要管这行代码，忽略
import type { FormInstance, FormRules } from 'element-plus'

// 8.4安装icon npm install @element-plus/icons-vue
// 8.5按需导入
import { UserFilled, Lock } from '@element-plus/icons-vue'

// 8.16导入 element-plus 的消息弹出框
//@ts-ignore
import { ElMessage } from 'element-plus'

// 8.22导入路由实例
import { useRouter } from 'vue-router'
// 8.23创建路由实例
const router = useRouter()

const ruleFormRef = ref<FormInstance>() //这里的ref初始值是空，代表就是null，用于获取组件实例

const ruleForm = reactive({
  username: 'admin',
  password: '123456',
})

// 8.9修改 message
const rules = reactive<FormRules>({
  username: [{
    required: true,
    trigger: 'blur',
    message: '请输入账号'
  }],
  passwprd: [{
    required: true,
    trigger: 'blur',
    message: '请输入密码'
  }]
})


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // 8.10这里的 valid 校验结果， element-plus 在 Methods 提供了 isValid: boolean,所以我们约束类型从 any 改为 boolean
  // formEl.validate((valid: any) => {
  formEl.validate((valid: boolean) => {
    // 8.11校验通过
    if (valid) {
      // 8.12向服务器发送请求
      ApiLogin(ruleForm).then(res => {
        // 8.13发送接口请求成功200
        if (res.code === 200) {
          // 8.14登录成功，发送提示
          // 8.15 使用 element-plus 里面的 Message 消息提示(不同状态)
          // 8.17去到 main.ts 里面
          ElMessage({
            // 8.19使用提示的方式显示到页面上，便于用户操作，或者使用语言的提示
            message: '登录成功',
            type: 'success',
          })



          // 8.20保存token
          localStorage.setItem('token', res.data.tokenHead + res.data.token)

          // 8.21跳转页面
          router.push('/home')

        }
      })
    }
    // 8.24如果用户错误的话，就去响应拦截器里面通用处理，去到 request 文件夹里面的 http.ts
    // } else {
    //   console.log('error submit!')
    //   return false
    // }
  })
}
</script>

<style lang="less" scoped>
// 8.3写样式
.login_container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2d3a4b;
  min-height: 100vh;

  .login_in {
    min-width: 418px;


    h1 {
      padding: 10px 0;
      font-size: 24px;
      color: #fff;
      text-align: center;
    }

    /deep/.el-input__wrapper {
      height: 50px;
      background-color: #283443;
    }


    .el-button {
      width: 100%;
      height: 40px;
    }
  }

}
</style>